<template>
	<view style="background-color: #FFFFFF;padding: 20rpx;">
		<view class="flex" >
			<view class="ImgBox">
				<image style="width: 100%;" :src="Info.member_avatar" mode="widthFix"></image>
			</view>
			<view class="InfoBox">
				<view class="flex Info2">
					<view class="">
						<view class="">{{Info.fans_num}}</view>
						<view class="">关注</view>
					</view>
					<view class="">
						<view class="">{{Info.like_num}}</view>
						<view class="">喜欢</view>
					</view>
				</view>
				<view class="">
					<view class="Btn" v-if="Info.is_follow==0" @click="follow(0)">关注</view>
					<view class="Btn Btn2" @click="follow(1)" v-else>已关注</view>
				</view>
			</view>
		</view>
		
		<view class="">个性签名：{{Info.sign_text}}</view>
		<view class="">
			<view class="Title2">视频</view>
		</view>
		
		<view class="TvBox2 flex wrap" >
			<view class="TvList" v-for="(item,index) in videoList" :key="index" style="position: relative;" @click="ToVideo(item.id,index)">
				<!-- <view class="" style="position: absolute;top: 0;right: 0;z-index: 999;background-color: #EE5BAB;line-height:50rpx;padding: 0 10rpx;color: #FFFFFF;" @click="dele(item.id)">删除</view> -->
				<view class="BgImg"><image style="width: 100%;height: 100%;" :src="item.cover_url" mode=""></image></view>
				<view class="Info">
					<view class="Title" style="color: #FFFFFF;">{{item.title}}</view>
					<view class="flex"  style="color: #FFFFFF;">
						<view class="texthide">{{item.member_name}}</view>
						<view class="">
							<view class=""><image style="width: 30rpx" src="../static/images/audienceIco.png" mode="widthFix"></image>{{item.visits}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Info:"",
				videoList:[],
				member_id:"1"
			}
		},
		onLoad(e) {
			if(e.member_id){
				this.member_id=e.member_id
			}
			this.getInfo()
			this.getList()
		},
		methods: {
			ToVideo(voideid,index){
				// nvue中
				// #ifdef APP-NVUE
					plus.storage.setItem('voideid', voideid)
					// plus.storage.setItem('voideindex', index)
				// #endif
				// h5中
				// #ifndef APP-NVUE
					uni.setStorageSync('voideid', voideid);
					// uni.setStorageSync('voideindex', index);
				// #endif
				uni.navigateTo({
					url:"/live/video/details?member_id="+this.member_id+"&index="+index+"&voideid="+voideid
				})
			},
			follow(state){
				let url = "/mobile/index.php?act=live&op=followAnchor"
				if(state==0){//关注
					url = "/mobile/index.php?act=live&op=followAnchor"
				}else{//取关
					url = "/mobile/index.php?act=live&op=cancelFollowAnchor"
					}
				this.$util.request({
					url: url,
					method: 'get',
					data: {
						member_id:this.member_id
					},
				}).then(res => {
					if (res.error_code == 0) {
						if(state==0){
							uni.showToast({
								title:"关注成功!",
								icon:'none'
							})
						}
						
						this.Info.is_follow = !this.Info.is_follow
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
							
							
				})
			},
			getList(){//获取短视频列表
					this.$util.request({
						url:'/mobile/index.php?act=video&op=getVideoList',
						method:'get',
						data:{
							member_id:this.member_id
						}
					}).then(res=>{	
						if(res.error_code==0){
							this.videoList=res.datas.list
							
						}else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}
					})
			},
			getInfo(){//获取主播信息
				this.$util.request({
					url:'/mobile/index.php?act=live&op=getAnchorInfo',
					method:'get',
					data:{
						member_id:this.member_id
					}
				}).then(res=>{
					if(res.error_code==0){
						this.Info=res.datas.info
						uni.setNavigationBarTitle({
							title:this.Info.nick_name || "主播信息"
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
					
				})
			}
		}
	}
</script>

<style>
	.Title2{
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}
	.Btn{
		width: 400rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #F0AD4E;
		border-radius: 30rpx;
		line-height: 60rpx;
	}
	.Btn2{
		background-color: #EEEEEE !important;
	}
	.Info2>view{
		width: 50%;
		text-align: center;
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	.InfoBox{
		width: 500rpx;
	}
	.ImgBox{
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 1rpx solid #EEEEEE;
	}
	.flex{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	
	
	.texthide{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: 180rpx;
	}
	.audience{
		position: absolute;
		top: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}
	.BgImg{
		width: 345rpx;
		height: 420rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}
	.TvList{
		width: 345rpx;
		height: 420rpx;
		border-radius: 20rpx;
		overflow: hidden;
		border:1rpx solid #EEEEEE;
		margin-bottom: 20rpx;
		position: relative;
	}
	.Info .Title{
			font-weight: bold;
	}
	.Info{
		position: absolute;
		bottom: 0;
		z-index: 10;
		width: 100%;
		padding:5rpx 10px;
		color: #FFFFFF;
		box-sizing: border-box;
	}

	.BgImg{
		width: 345rpx;
		height: 420rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}
	.TvList{
		width: 345rpx;
		height: 420rpx;
		border-radius: 20rpx;
		overflow: hidden;
		border:1rpx solid #EEEEEE;
		margin-bottom: 20rpx;
		position: relative;
	}
	.TvBox{
		margin: 20rpx;
	}
	.ListBox{
		width:300rpx;
	}
</style>
